<template>
  <el-row>
    <el-col :md="16">
      <div class="app-container">
        <el-steps :active="active" finish-status="success" simple class="mb-20">
          <el-step title="基础信息"></el-step>
          <el-step title="供应商信息"></el-step>
          <el-step title="招标规则"></el-step>
        </el-steps>
        <component :is="currentStep" />
        <div class="text-center">
          <el-button v-show="active > 0" type="primary" @click="prev"
            >上一步,{{ prevText }}</el-button
          >
          <el-button v-if="!isLast" type="primary" @click="next"
            >下一步,{{ nextText }}</el-button
          >
          <el-button v-else type="primary" @click="submit">提交审核</el-button>
          <div class="float-right">
            <el-button type="primary" plain>保存</el-button>
            <el-button type="danger" plain>修改</el-button>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import basic from "./components/basic";
import supplier from "./components/supplier";
import rule from "./components/rule";
export default {
  components: {
    basic,
    supplier,
    rule,
  },
  data() {
    return {
      active: 0,
      currentStep: "basic",
      isLast: false,
      prevText: "",
      nextText: "",
    };
  },
  watch: {
    active(val) {
      this.init(val);
    },
  },
  methods: {
    prev() {
      if (this.active-- == 0) return;
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    submit() {
      this.$confirm("确定提交该招标信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.$router.push({
            name: "PurchaseIndex",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    init(val) {
      if (val == 2) {
        this.isLast = true;
      } else {
        this.isLast = false;
      }
      switch (val) {
        case 0:
          this.currentStep = "basic";
          this.nextText = "供应商设置";
          break;
        case 1:
          this.currentStep = "supplier";
          this.prevText = "基本信息";
          this.nextText = "供应商设置";
          break;
        case 2:
          this.currentStep = "rule";
          this.prevText = "供应商设置";
          this.nextText = "";
          break;
        default:
          break;
      }
    },
  },
  created() {
    this.init(this.active);
  },
};
</script>

<style lang="scss" scoped>
</style>